import React from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, message } from 'antd';
import './index.scss'

import { loginFn } from '../../api/user';

import { useDispatch } from 'react-redux';
import { changeUser } from '../../store/modules/user'

import { useNavigate } from 'react-router-dom';

const App = () => {

    const [messageApi, contextHolder] = message.useMessage();
    const router = useNavigate()

    const dis = useDispatch()

    // 表单的提交事件
    const onFinish = (values) => {
        // 发送数据请求进行登录操作
        loginFn(values).then(res => {
            // console.log(res);
            if (res.code == 200) {

                // 将登录信息放在全局状态中
                res.data.loginState = true
                dis(changeUser(res.data))

                messageApi.open({
                    type: 'success',
                    content: '用户登录成功，即将进入首页。',
                });

                // 跳转页面
                router('/', {
                    state: {
                        name: '要传递的参数',
                        msg: '传递更多的内容'
                    }
                })
            }

        })
    };


    return (
        <Form
            name="normal_login"
            className="login-form"
            initialValues={{
                remember: true,
            }}
            onFinish={onFinish}
        >
            <Form.Item
                name="adminname"
                rules={[
                    {
                        required: true,
                        message: '请输入管理员账号!',
                    },
                ]}
            >
                <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="管理员账号" />
            </Form.Item>
            <Form.Item
                name="password"
                rules={[
                    {
                        required: true,
                        message: '请输入管理员密码!',
                    },
                ]}
            >
                <Input
                    prefix={<LockOutlined className="site-form-item-icon" />}
                    type="password"
                    placeholder="管理员密码"
                />
            </Form.Item>
            <Form.Item>
                <Form.Item name="remember" valuePropName="checked" noStyle>
                    <Checkbox>记住密码</Checkbox>
                </Form.Item>

                <a className="login-form-forgot" href="">
                    忘记密码
                </a>
            </Form.Item>

            <Form.Item>
                <Button type="primary" htmlType="submit" className="login-form-button">
                    登录
                </Button>
            </Form.Item>


            {contextHolder}
        </Form>
    );
};
export default App;